<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        /* 
            网页是自上向下加载的，如果将js代码编写到网页的上边，
                js代码在执行时，网页还没有加载完毕，这时会出现无法获取到DOM对象的情况

                如何解决这个问题：
                    1. 将script标签编写到body的最后
                    2. 在script标签中，将代码编写到window.onload事件中,只能有一个window.onload事件
                    3. 在script标签中，将代码编写到document.addEventListener("DOMContentLoaded",function(){})中
                        可以有多个document.addEventListener("DOMContentLoaded",function(){})
                    4. 将代码编写到外部的js文件中，然后defer的形式进行引入
                    <script defer src="js/jquery.min.js"><\/script>
        */
        window.onload = function(){
            const btn = document.getElementById('btn');
            btn.onclick = function(){
                alert('点击了');
            }
        }
    </script>
</head>
<body>
    <button id="btn">点我一下</button>
    
</body>
</html>